<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教练预约查询</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <style>
        .layui-layout-admin .layui-header {
            background-color: #1E9FFF; /* 主题色改为蓝色 */
        }
        .layui-nav-itemed>a, .layui-nav-tree .layui-nav-itemed>a:hover {
            background-color: #1E9FFF; /* 菜单选中项蓝色 */
        }
    </style>
</head>
<body >
<div class="layui-layout layui-layout-admin">
    <div  >
        <!-- 面包屑导航 -->
        <div class="layui-card">
            <div class="layui-breadcrumb" lay-filter="breadcrumb">
                <a>首页</a>
                
                <a href="/ljk/coach/coach"><cite>教练预约</cite></a>
            </div>
        </div>

        <!-- 搜索区域 -->
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="layui-icon layui-icon-search"></i> 教练查询
            </div>
            <div class="layui-card-body">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">教练姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" placeholder="请输入教练姓名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">手机号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="phone" placeholder="请输入手机号" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="coachTable" lay-filter="coachTable"></table>
            </div>
        </div>

    </div>
</div>

<script  th:inline="none">
    layui.use(['element', 'table', 'form', 'layer'], function(){
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;

        // 初始化表格
        table.render({
            elem: '#coachTable',
            url: '/ljk/coach/list',
            toolbar: '<div><i class="layui-icon layui-icon-refresh"></i> 教练列表</div>',
            page: true,
            cols: [[
                {field: 'id', title: 'ID', width:80, sort: true},
                {field: 'name', title: '教练姓名', },
                {field: 'phone', title: '手机号',},
                {field: 'ssex', title: '性别', width:80, templet: function(d){
                    return d.gender === '1' ? '男' : '女';
                }},
                {field: 'experienceYears', title: '年龄',  templet: function(d){
                    const birthday = d.birthday
                    return birthday ? (new Date().getFullYear() - new Date(birthday).getFullYear()) + '年' : '未知';
                }},
                {field: 'type', title: '驾照类型', },
                {title: '操作', width:150, align:'center', fixed: 'right', templet: function(d){
                    return '<a class="layui-btn layui-btn-xs" lay-event="reserve">预约</a>' +
                           '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="detail">详情</a>';
                }}
            ]],
            done: function(res, curr, count){
                $('.layui-table-tool self').css('background','#f2f2f2');
            }
        });

        // 搜索监听
        form.on('submit(search)', function(data){
            table.reload('coachTable', {
                where: data.field
            });
            return false;
        });

        // 操作按钮样式优化
        table.on('tool(coachTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'reserve'){
                layer.open({
                    title: '<i class="layui-icon layui-icon-form"></i> 预约教练 - ' + data.name,
                    type: 2,
                    area: ['700px', '600px'],
                    content: '/ljk/coach/reserve?id=' + data.id
                });
            } else if(obj.event === 'detail'){
                layer.open({
                    title: '<i class="layui-icon layui-icon-read"></i> 教练详情 - ' + data.name,
                    type: 2,
                    area: ['600px', '500px'],
                    content: '/ljk/coach/detail?id=' + data.id
                });
            }
        });
    });
</script>
</body>
</html>
